<template lang="pug">
  div.chat-container
    header.chat-header
      p.text 好友
      p.chat-icon.iconfont.icon-tianjiahaoyou
      p.chat-icon.iconfont.icon-list
    main
      ul.chat-list
        li(v-for="d in list" :key="d.fid" @click="onChat(d.fid,d.cover,d.name)")
          img(:src="d.cover")
          div.content
            div.con-t
              h3.title {{d.name}}
              p.times {{ d.times.slice(0,d.times.indexOf('T')) }}
            div.con-b 你好吖吖吖吖吖你好吖吖吖吖吖你好吖吖吖吖吖
          
</template>

<script>
export default {
  data(){
    return {
      list: []
    }
  },
  created(){
    this.getList();
  },
  methods: {
    getList(){
      this.$http.get('/get-friends').then(data=>{
        this.list = data.data;
        console.log(data);
      })
    },
    onChat(fid,img,name){
      this.$router.push('/adetail?id='+fid + '&img='+img+'&name='+name)
    }
  }
}
</script>

<style lang="sass">
.chat-container
  width: 100%
  height: 100vh
  background: #F9F9F9
  .chat-header
    width: 100%
    height: .68rem
    border-bottom: 3px solid #f5f5f5
    background: #fff
    position: fixed
    top: 0
    left: 0
    position: relative
    p
      position: absolute
    .text
      left: .16rem
      top: .24rem
      color: rgba(0, 0, 0, 1)
      // 该属性为了增加或减少字符间的空白字符
      letter-spacing: 0.2652941153329961px
      font-size: .22rem
    .chat-icon
      width: 0.28rem
      height: 0.28rem
      font-size: .28rem
    .icon-tianjiahaoyou
      left: 2.91rem
      top: .31rem
    .icon-list
      left: 3.31rem
      top: .31rem
  .chat-list li
    height: 0.64rem
    margin: .19rem 0 0 .16rem
    border-bottom: 2px solid #efefef
    display: flex
    img
      width: 0.44rem
      height: 0.44rem
      border-radius: 50%
      margin: .06rem .1rem
    .content
      margin-left: .2rem
      .con-t
        display: flex
        position: relative
        .title
          font-size: .16rem
          line-height: .22rem
          color: #000
        .times
          width: .72rem
          height: 0.22rem
          font-size: .12rem
          position: absolute
          top: .06rem
          right: .06rem
          color: #D0D0D0
      .con-b
        width: 2.6rem
        height: .32rem
        font-size: .13rem
        color: #888
        line-height: .32rem
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
</style>

